<template>
  <div id="tab">
    <div class="bg">
      <van-tabs v-model="active" title-active-color="#77DAC4" color="#77DAC4" line-width="83.75px">
        <van-tab :title="labelTitles.Introduction">
          <slot name="Introduction"></slot>
        </van-tab>
        <van-tab :title="labelTitles.Directory">
          <slot name="Directory"></slot>
        </van-tab>
        <van-tab :title="labelTitles.Appraise">
          <slot name="Appraise"></slot>
        </van-tab>
        <van-tab :title="labelTitles.Question">
          <slot name="Question"></slot>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
Vue.use(Tab).use(Tabs);

export default {
  name: "tab",
  props: ["labelTitles"],
  components: {},
  data() {
    return {
      active: 0
    };
  },
  computed: {},
  watch: {},
  methods: {

  },
  created() {},
  mounted() {
       
    if (this.labelTitles.try) {
      this.$nextTick(() => {
        let dir = document.getElementsByClassName("van-ellipsis")[2];
        dir.style = "display:inline;";
        //添加试学 图标文字
        dir.innerHTML =
          "目录<span  style='display: inline;border:1px solid #FF6B43;border-radius:2px;color: #FF6B43;'>试学<span>";
      });
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.bg {
  /* background-color: #fff; */
}
.label_width {
  width: 88px;
}
</style>